<template xmlns:font-family="http://www.w3.org/1999/xhtml">
  <div class="block_8 flex-col">
    <div class="text-wrapper_18 flex-row">
      <span class="text_40">各组织单位组织数量统计</span>
    </div>
    <div class="group_17 flex-row">
        <div class="legend-list">
            <div class="legend-item f-r a-c" v-for="(item,index) in dataList" >
                <div class="legend-icon f-s" :style="{ backgroundColor: colorList[index] }"></div>
                <div class="legend-name f-s">{{ item.name }}</div>
                <div class="legend-value f-s">{{ item.value }}个</div>
                <div class="legend-percentage f-s"  :style="{ color: colorList[index] }">{{ item.percentage }}</div>
            </div>
        </div>
      <div style="width: 65%">
        <v-chart style="width: 100%;height: 100%" :option="pieOption" />
      </div>
    </div>
  </div>
</template>
<script>
import {http} from "@/api";
import {getName,Investor} from "@/dict";
export default {
  data() {
    return {
      constants: {},
        dataList: [],
      pieOption: {},
        colorList: ['#2251F8', '#68E365', '#FFA133', '#E3E3E3','#2251F8', '#68E365', '#FFA133', '#E3E3E3']
    }
  },
    created() {
        http.projectStatic.deptCount().then(res => {
            console.log(res)
            this.dataList = res.data.map(el => {
                return {
                    name: getName(el.investor, Investor),
                    value: el.sum,
                    percentage: el.percentage
                }
            })
            this.pieOption = {
                'series': [{
                    'type': 'pie',
                    roseType : 'area',
                    'center': ['50%', '50%'],
                    'radius': ['25%', '90%'],
                    'color': this.colorList,
                    labelLine: {
                        show: false
                    },
                    label: {
                        show: false
                    },
                    'data': this.dataList
                }]
            }
        })
    },
  methods: {}
}
</script>
<style lang="scss">
@import "./index.scss";
.project-static-page {
    .legend-list {
        
        .legend-icon {
            width: 16px;
            height: 16px;
            border-radius: 50%;
        }
        .legend-name {
           width: 60px;
            margin-left: 10px;
            height: 14px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #171B1E;
        }
        .legend-value {
            min-width: 50px;
            font-size: 20px;
            font-family: DIN;
            font-weight: 500;
            color: #717579;
            margin: 0 10px;
            text-align: center;
        }
        .legend-percentage {
            font-size: 30px;
            font-family: DIN;
            font-weight: 500;
            color: #2251F8;
        }
    }
}
</style>
